<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <title>添加图文组合信息窗口</title>
  <meta charset="utf-8" name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <!--    <meta name="viewport"-->
  <!--          content="width=device-width,initial-scale=1.0,user-scalable=no">-->
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <style>
    body,
    html,
    #container {
      overflow: hidden;
      width: 100%;
      height: 100%;
      margin: 0;
      font-family: "微软雅黑";
    }

    .popup {
      z-index: 1;
      position: absolute;
      text-align: center;
      border: none;
      text-align: center;
      width: 100%;
      height: 60px;
      font: 16px/60px Tahoma, Verdana, sans-serif;
      box-shadow: 0 10px 14px rgba(0, 0, 0, 0.4);
      color: #fefefe;
      background: #1e90ff;
    }
  </style>
  <script src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=Ir7z3sSO2Lhwg0AprFzCzWd1VWP2Y9kZ"></script>
</head>

<body>
  <div class="popup">点击Marker显示信息</div>
  <div id="container"></div>
</body>

</html>
<script>
  var popup = document.querySelector('.popup');
  function test() {
    console.log('Ark WebComponent')
    return "This value is from index.html"
  }
  var h5Port;
  var mapData;
  var length = 0
  window.addEventListener('message', function (event) {
    if (event.data === '__init_port__') {
      if (event.ports[0] !== null) {
        h5Port = event.ports[0]; // 1. 保存从ets侧发送过来的端口
        h5Port.onmessage = function (event) {
          // 2. 接收ets侧发送过来的消息.
          var msg = 'Got message from ets:';

          var result = event.data;
          if (typeof (result) === 'string') {
            console.info(`received string message from html5, string is: ${result}`);
            mapData = []
            var result_ = JSON.parse(result)
            if (result_['type']) {
              //如果为单独地点数据
              data = result_['mapData']
              let point = new BMapGL.Point(data.lng, data.lat)
              map.centerAndZoom(point, 15);
              popup.innerHTML = data.place
              var opts = {
                width: 250,     // 信息窗口宽度
                title: data.place, // 信息窗口标题
                message: "这里是故宫"
              }
              let sContent = `日期:${data.date}<div>交通方式:${data.trans}</div><div>花费:${data.expense}</div>`
              var infoWindow = new BMapGL.InfoWindow(sContent, opts);  // 创建信息窗口对象 
              map.openInfoWindow(infoWindow, point); //开启信息窗口
              popup.innerHTML = `当前：${data.place}`

            } else {
              mapData = result_
              let center=calculateCenter(mapData)
              map.clearOverlays();
              map.centerAndZoom(new BMapGL.Point(center.lng, center.lat), 4);
              index = 0
              length = mapData.length
              mapData.forEach(item => {
                console.log(item)
                var marker = new BMapGL.Marker(new BMapGL.Point(item.lng, item.lat));
                window.map.addOverlay(marker);

                popup.innerHTML = "数据载入成功"

              })
            }

          }
        }
      }
    }
  })
  var map = new BMapGL.Map('container');
  map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 15);
  map.enableScrollWheelZoom(true);
  console.log(this);
  //计算中心点
  function calculateCenter(coordinates) {
    if (coordinates.length === 0) {
      return null; // 如果没有坐标，则返回null
    }

    let totalLat = 0;
    let totalLng = 0;

    for (const coord of coordinates) {
      totalLat += coord.lat;
      totalLng += coord.lng;
    }

    const centerLat = totalLat / coordinates.length;
    const centerLng = totalLng / coordinates.length;

    return { lat: centerLat, lng: centerLng };
  }

  function clear() {
    map.clearOverlays()
  }








</script>